<template>
	<view class="content">
		<view class="form">
			<view class="common-tips">请选择设备现场情况<text style="color:#f00;">*</text></view>
			<u-form :model="form" label-width="140">
				<u-form-item :border-bottom="false">
					<u-radio-group v-model="radio" wrap active-color="#0DA297">
						<u-radio v-for="(item,index) in radioList" :key="index" :name="item.name">
							{{ item.name }}
						</u-radio>
					</u-radio-group>
				</u-form-item>

				<view v-show="radio==radioList[radioList.length-1].name"><u-input type="textarea" height="200" border
						placeholder="请输入现场情况" v-model="form.reason" /></view>

				<view class="common-tips">请上传凭证<text style="color:#f00;">*</text></view>

				<view class="upload-demo">充电器和设备插座结合图<text style="color:#f00;">*</text><text @click="handleUploadDemo"
						style="font-weight: 600; font-size:26rpx;">(查看示例图)</text></view>
				<view>
					<!-- #ifdef MP-WEIXIN -->
				<!-- 	<u-upload ref="uUpload" :fileList="fileList1"  :source-type="['camera']" :show-progress="false" max-count="1"
						:before-upload="beforeUpload"  :show-tips="false" :multiple="false" :size-type="['compressed']"
						@on-error="handleError" :form-data="{modular_name:'repair'}" name="file" :action="action">
					</u-upload> -->
					<imgWater :adress="adress" :phone="phone" :logid="logid" :type="1"  @onRemove="onRemove" @imgSuccess="imgSuccess"></imgWater>
					<!-- #endif -->

					<!-- #ifdef MP-ALIPAY -->
					<u-upload ref="uUpload" :source-type="['camera']" :auto-upload="false"
						@on-choose-complete="handleChoose" @on-remove="alipayRemove" max-count="1" :multiple="false"
						:size-type="['compressed']"></u-upload>
					<!-- #endif -->
				</view>
				<canvas type="2d" id="myCanvas"
					style="position: absolute;top: -9999999px; left: -9999999px;"></canvas>
				<view class="upload-demo">设备插座细节图+端口码结合图<text @click="handleUploadDemo"
						style="font-weight: 600; font-size:26rpx;">(查看示例图)</text></view>
				<view>
					<!-- #ifdef MP-WEIXIN -->
					<!-- <u-upload ref="uUpload2" :source-type="['camera']" :show-progress="false" max-count="1"
						:show-tips="false" :multiple="false" :size-type="['compressed']" @on-error="handleError2"
						:form-data="{modular_name:'repair'}" name="file" :action="action">
					</u-upload> -->
					<imgWater :adress="adress" :phone="phone" :logid="logid" :type="2"   @onRemove="onRemove" @imgSuccess="imgSuccess"></imgWater>
					<!-- #endif -->
					<!-- #ifdef MP-ALIPAY -->
					<u-upload ref="uUpload2" :source-type="['camera']" :auto-upload="false"
						@on-choose-complete="handleChoose2" @on-remove="alipayRemove2" max-count="1" :multiple="false"
						:size-type="['compressed']"></u-upload>
					<!-- #endif -->
				</view>


				<view class="phone">
					<view>
						<u-form-item class="phone-item">
							<u-input placeholder="输入手机号码" maxlength="11" type="number" :clearable="false"
								v-model="form.phone" :custom-style="phoneInput" />
						</u-form-item>
					</view>
					<text class="iconfont kang-huafei"></text>
					<view class="verification-code">
						<u-verification-code :seconds="60" ref="uCode" @change="handleCodeChange">
						</u-verification-code>
						<text @tap="handleGetCodeClick" class="get-code">{{tips}}</text>
					</view>
				</view>
				<view class="phone">
					<view>
						<u-form-item class="phone-item">
							<u-input placeholder="输入验证码" type="number" v-model="form.verificationCode" />
						</u-form-item>
					</view>
					<text class="iconfont kang-dunpai"></text>
				</view>
			</u-form>
			<view class="submit">
				<uv-btn :loading="loading" shape="circle" @click="handleSubmitClick" text="确定提交"
					loading-text="提交中..."></uv-btn>
			</view>
		</view>
		<view class="bottom-safe-area"></view>

		<common-drag />
	</view>
</template>
<script>
	import imgWater from './watermark/watermark.vue'
	import {
		UPLOAD_URL
	} from '@/env.js';

	export default {
		components:{
			imgWater
		},
		data() {
			return {

				initStatus: '3',

				id: '',
				//Form data
				form: {
					reason: '',
					phone: '',
					verificationCode: ''
				},
				//radio
				radio: '',
				radioList: [],
				//phone
				phoneInput: {
					paddingRight: '120rpx'
				},
				//Verification code component related data
				tips: '',
				//上传
				action: '',
				//submit
				loading: false,
				//location
				location: {
					longitude: '',
					latitude: ''
				},
				//支付宝
				alipayFileList: [], //上传区域1
				alipayFileList2: [], //上传区域2

				// 图片加水印
				adress:'', // 水印的地址
				phone:'',
				img1:'' , // 上传的图片1
				img2:'' , // 上传的图片地址2
				logid:'' , // 订单号
			}
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id;
			};
			if(options.community_name){
				
				this.adress = options.community_name
			};
			if(options.log_id){
				this.logid = options.log_id;
			}
			console.log(this.logid,'this.logid');
			 this.phone = uni.getStorageSync('userPhone');
			this.action = this.$uploadUrl;

			this.getRepairInit();

			this.getRepairInitTxt();
		},
		onShow() {
			this._isAuthorize();
		},
		methods: {

			getRepairInit() {
				this.$u.api.getRepairInit().then(res => {
					if (res.result_code == '377') {
						this.initStatus = res.data.status;
					} else {
						this.$utils.modal({
							title: '温馨提示',
							content: res.msg,
							showCancel: false,
						});
					};
				}).catch(err => {

				})
			},

			getRepairInitTxt() {
				this.$u.api.getRepairInitTxt().then(res => {
					if (res.result_code == '300') {
						this.radioList = res.data.countdown;
					} else {
						this.$utils.modal({
							title: '温馨提示',
							content: res.msg,
							showCancel: false,
						});
					};
				}).catch(err => {

				})
			},
			//form
			handleSubmitClick() {
				//verify radio
				if (!this.radio) {
					this.$utils.toast('请选择设备现场情况');
					return false;
				};

				if (this.radio == this.radioList[this.radioList.length - 1].name) {
					if (this.$utils.isAllEmpty(this.form.reason)) {
						this.$utils.toast('请输入现场情况');
						return false;
					};
				};

				//微信:
				//上传成功的数组。接口返回的数据比如远程图片地址也在里面。
				// #ifdef	MP-WEIXIN
				//第一块上传区域
				/* let files1 = [];
				files1 = this.$refs.uUpload.lists.filter(val => {
					return val.progress == 100;
				});
				//第二块上传区域
				let files2 = [];
				files2 = this.$refs.uUpload2.lists.filter(val => {
					return val.progress == 100;
				}); */
				// #endif

				//支付宝:
				// #ifdef	MP-ALIPAY
				let files1 = this.alipayFileList; //第一块上传区域
				let files2 = this.alipayFileList2; //第二块上传区域
				// #endif

				if (this.initStatus == '3' && this.$utils.isAllEmpty(this.form.phone)) {
					//手机号后端要求必填时，才验证手机号
					this.$utils.toast('手机号不能为空');
				} else if (this.initStatus == '3' && this.$utils.isAllEmpty(this.form.verificationCode)) {
					//手机号后端要求必填时，才验证手机号的验证码
					this.$utils.toast('验证码不能为空');
				} else if (this.initStatus == '3' && !this.$utils.isPhone(this.form.phone)) {
					//手机号后端要求必填时，才验证手机号
					this.$utils.toast('手机号格式不正确');
				} else if (this.$utils.isAllEmpty(this.img1)) {
					//必传区域的图片必须传一张
					this.$utils.toast('请上传1张实拍图！');
				} else {
					//验证完成发送request 

					//微信:
					// #ifdef	MP-WEIXIN
					/* //取出上传的图片远程地址
					//上传区域1
					let arr1 = [];
					files1.forEach(item => {
						arr1.push(item.response.data);
					});
					//上传区域2
					let arr2 = [];
					files2.forEach(item => {
						arr2.push(item.response.data);
					}); */
					// #endif

					//支付宝:
					// #ifdef	MP-ALIPAY
					let arr = files;
					// #endif

					//报修原因的顺序，1,2,3,4...
					let num = undefined;
					this.radioList.forEach((item, index) => {
						if (item.name == this.radio) {
							num = index + 1;
						};
					});
					let data = {
						phone: this.form.phone,
						user_log_id: this.id,
						identifying_code: this.form.verificationCode,
						bright: num + '',
						textarea: num == this.radioList.length ? this.form.reason : '',
						/* image: arr1.toString(), //上传区域1图片
						extend_d: arr2.toString(), //上传区域2图片 */
						image: this.img1, //上传区域1图片
						extend_d: this.img2, //上传区域2图片
						...this.location,

					};
					this.submitRequest(data);
				};
			},
			submitRequest(data) {
				this.loading = true;
				this.$u.api.getChargeRepairSubmit(data).then(res => {
					this.loading = false;
					if (res.result_code == '322' || res.result_code == '377') {
						this.$utils.toastCallback(res.msg, () => {
							uni.reLaunch({
								url: '/pages/index/index'
							});
						});
					} else {
						this.$utils.modal({
							title: '温馨提示',
							content: res.msg,
							showCancel: false,
						});

					};
				}).catch(err => {
					this.loading = false;
				})
			},
			//verification code
			handleCodeChange(text) {
				this.tips = text;
			},
			handleGetCodeClick() {
				//Verify mobile phone number				
				if (this.$utils.isPhone(this.form.phone)) {
					//Is it being acquired
					if (this.$refs.uCode.canGetCode) {

						this.$refs.uCode.start();
						this.getCodeRequest(); //request

					} else {
						this.$utils.toast('正在获取验证码');
					};
				} else {
					this.$utils.toast('请输入正确的手机号格式');
				}
			},
			getCodeRequest() {
				this.$u.api.getChargeRepairCode({
					phone: this.form.phone,
					user_log_id: this.id,
					type: '3', //代表是充电倒计时的维修获取手机号
				}).then(res => {
					if (res.result_code == '347') {
						this.$utils.toast('验证码已发送');
					};
				}).catch(err => {})
			},
			//上传
			handleUploadDemo() {
				//查看示例图跳转至h5
				this.$utils.jumpWebview('https://api.cd1a.cn/h5/common-h5/upload-demo.html');
			},
			handleError(data, index, lists) {
				this.$utils.toast('上传失败！');
				//this.$refs.uUpload.remove(index);
			},
			handleError2(data, index, lists) {
				this.$utils.toast('上传失败！');
				//this.$refs.uUpload.remove(index);
			},
			//position
			_isAuthorize() {


				// #ifdef	MP-ALIPAY
				uni.getLocation({
					type: 'gcj02',
					success: res => {
						this.location = {
							longitude: res.longitude,
							latitude: res.latitude,
						};
					}
				});
				// #endif

				//微信
				// #ifdef	MP-WEIXIN
				const that = this;
				uni.authorize({
					scope: 'scope.userLocation',
					success() {
						that._getLocation();
					},
					fail() {
						that._openAuthorizeModal();
					}
				});
				// #endif
			},
			_getLocation() {
				uni.getLocation({
					type: 'gcj02',
					success: res => {
						this.location = {
							longitude: res.longitude,
							latitude: res.latitude,
						};
						console.log(this.location);
					}
				});
			},
			_openAuthorizeModal() {
				this.$utils.modal('请求授权当前位置', '需要获取您的地理位置，请确认授权', '确定', '取消', true, (bool) => {
					if (bool) {
						uni.openSetting();
					} else {
						this.$utils.toast('您拒绝了授权，无法获得您的位置');
					}
				});
			},
			//支付宝上传
			handleChoose(lists) {
				let len = lists.length;
				uni.showLoading({
					title: '上传中'
				});
				uni.uploadFile({
					url: UPLOAD_URL,
					filePath: lists[len - 1].url,
					fileType: 'image',
					name: 'file',
					formData: {
						"modular_name": 'repair'
					},
					success: (uploadFileRes) => {
						uni.hideLoading();
						let res = JSON.parse(uploadFileRes.data);
						if (res.code == 200) {
							this.alipayFileList.push(res.data);
						} else {
							this.$utils.toast('上传失败，请重试！');
							this.$refs.uUpload.remove(len - 1);
						};
					},
					fail: () => {
						uni.hideLoading();
						this.$utils.toast('上传失败，请重试！');
						this.$refs.uUpload.remove(len - 1);

					}
				});

			},
			handleChoose2(lists) {
				let len = lists.length;
				uni.showLoading({
					title: '上传中'
				});
				uni.uploadFile({
					url: UPLOAD_URL,
					filePath: lists[len - 1].url,
					fileType: 'image',
					name: 'file',
					formData: {
						"modular_name": 'repair'
					},
					success: (uploadFileRes) => {
						uni.hideLoading();
						let res = JSON.parse(uploadFileRes.data);
						if (res.code == 200) {
							this.alipayFileList2.push(res.data);
						} else {
							this.$utils.toast('上传失败，请重试！');
							this.$refs.uUpload2.remove(len - 1);
						};
					},
					fail: () => {
						uni.hideLoading();
						this.$utils.toast('上传失败，请重试！');
						this.$refs.uUpload2.remove(len - 1);

					}
				});

			},
			//支付宝移除
			alipayRemove(index) {
				this.alipayFileList.splice(index, 1);
			},
			alipayRemove2(index) {
				this.alipayFileList2.splice(index, 1);
			},
			// 照片移除时触发
			onRemove(type){
			if(type == 1){
				this.img1 = '';
			}else{
				this.img2 = '';	
			}		
			},
			// 加水印上传成功时
			imgSuccess(img,type){
				if(type == 1){
					this.img1 = img;
				}else{
					this.img2 = img;
				}
			}
		}

	}
</script>

<style lang="scss" scoped>
	.iconfont {
		color: #0da297;
		font-size: 50rpx;
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.form {
		padding: 0 30rpx;
		padding-top: 20rpx;
		padding-left: 30rpx;
	}

	.phone {
		position: relative;
		padding-left: 70rpx;
	}

	.verification-code {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.submit {
		padding-top: 60rpx;
	}

	.get-code {
		color: #0da297;
		font-size: 28rpx;
	}

	//上传
	.common-tips {
		font-size: 30rpx;
		font-weight: bold;
		color: #2fb1a7;
		padding: 20rpx 0;
	}

	.upload-txt {
		line-height: 50rpx;
		padding-top: 12rpx;
	}

	.upload-txt text:first-child {
		font-size: 26rpx;

		color: #e62d2d;
	}

	.upload-txt text:last-child {
		font-size: 26rpx;

		color: #727272;
	}

	.upload-demo {
		font-size: 28rpx;
		color: #727272;
		padding: 10rpx 0;
	}
</style>
<style>
	.u-radio {
		margin-bottom: 30rpx !important;
	}

	page {
		background-color: #fff;
	}
</style>